<template>
  <div class="app-container">
    <el-card v-loading="loading">
      <div slot="header">
        <el-button type="primary" @click="resetForm()">返回</el-button>
      </div>
      <el-form ref="ruleForm" :model="formData" :rules="rules" label-width="120px">
        <el-form-item label="领用时间" prop="">
          <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="formData.receiveTime" type="date"
                          placeholder="领用时间"></el-date-picker>
        </el-form-item>
        <el-form-item label="专业类别" prop="">
          <!--<el-input v-model="formData.professCate" placeholder="专业类别"/>-->

          <el-select clearable v-model="formData.professCate" filterable placeholder="专业类别">
            <el-option v-for="item in professCates" :key="item.id" :label="item.valueOne" :value="item.valueOne">
            </el-option>
          </el-select>

        </el-form-item>
        <el-form-item label="领用单位" prop="">
          <!--<el-input v-model="formData.receiveUnit" placeholder="领用单位"/>-->

          <el-select clearable v-model="formData.receiveUnit" filterable placeholder="领用单位">
            <el-option v-for="item in receiveUnits" :key="item.id" :label="item.valueOne" :value="item.valueOne">
            </el-option>
          </el-select>

        </el-form-item>
        <el-form-item label="项目名称" prop="">
          <!--<el-input v-model="formData.projectName" placeholder="项目名称"/>-->

          <el-select clearable v-model="formData.projectName" filterable placeholder="项目名称" @change="changeProjectNameF">
            <el-option v-for="item in projectNames" :key="item.id" :label="item.valueOne" :value="item.valueOne">
            </el-option>
          </el-select>

        </el-form-item>
        <el-form-item label="单位工程名称" prop="">
          <!--<el-input v-model="formData.unitEngName" placeholder="单位工程名称"/>-->

          <el-select clearable v-model="formData.unitEngName" filterable placeholder="单位工程名称">
            <el-option v-for="item in unitEngineNames" :key="item.id" :label="item.valueTwo" :value="item.valueTwo">
            </el-option>
          </el-select>

        </el-form-item>
        <el-form-item label="领用批次" prop="">
          <el-input v-model="formData.receiveBatch" placeholder="领用批次"/>
        </el-form-item>
        <el-form-item label="使用地点" prop="">
          <el-input v-model="formData.useAddress" placeholder="使用地点"/>
        </el-form-item>
        <!--<el-form-item label="领用部门" prop="">-->
        <!--<el-input v-model="formData.receiveDepart" placeholder="领用部门" />-->
        <!--</el-form-item>-->
        <el-form-item label="仓库" prop="">
          <el-select clearable v-model="formData.repositoryId" filterable placeholder="仓库">
            <el-option v-for="item in warehouseList" :key="item.value" :label="item.repositoryName" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <div v-if="formData.materailDTOS.length"
                      v-for="(item,index) in formData.materailDTOS" :key="index">
                    <div style="display: flex;">
                      <el-form-item prop="materailBasicInfoId" label="物料编号,描述">

                          <el-select clearable v-model="item.materailBasicInfoId" filterable
                                    remote
                                    reserve-keyword
                                    :remote-method="queryMaterail"
                                    :loading="loading" placeholder="请输入物料描述">
                            <el-option
                              v-for="item1 in materiaOptions"
                              :key="item1.value"
                              :label="item1.materialNumber+'---'+item1.materialName"
                              :value="item1.id">
                            </el-option>
                          </el-select>

                      </el-form-item>

                      <el-form-item prop="projectText" label="数量">

                          <el-input style="width: 100%;'" v-model="item.purchaseQuantity" type="number" :rows="5"/>

                      </el-form-item>

                      <el-form-item label="工厂非限制库存" prop="notLimitStock">

                          <el-input style="width: 100%;'" type="number" placeholder="工厂非限制库存" v-model="item.notLimitStock"/>

                      </el-form-item>
                      <el-form-item label="单价" prop="singlePrice">

                          <el-input  style="width: 100%;'" placeholder="单价" v-model="item.singlePrice"/>

                      </el-form-item>
                        <div>
                          <el-button v-if="formData.statusName == '新建'" @click="deleLine(index)" type="medium " size="" icon="el-icon-add">删除</el-button>
                        </div>
                    </div>
                  </div>
        <el-form-item v-if="formData.statusName == '新建'">
          <el-button @click="submitLine" type="primary" icon="el-icon-add">添加物料</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="resetForm">关闭</el-button>
          <el-button :loading="isAdd" type="primary" @click="submitForm('ruleForm')">
            <span v-if="isAdd">提交中...</span>
            <span v-else>提交</span>
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-dialog :visible.sync="visible" append-to-body width="33%">
      <p class="map">物料编号</p>
      <el-select clearable v-model="materailInfoValue" filterable
                 remote
                 reserve-keyword
                 :remote-method="queryMaterail"
                 :loading="loading" placeholder="请输入物料描述">
        <el-option
          v-for="item in materiaOptions"
          :key="item.value"
          :label="item.materialNumber+'---'+item.materialName"
          :value="item.id">
        </el-option>
      </el-select>
      <span slot="footer" class="dialog-footer">
        <el-button class="global-button" round type="primary" @click="submitLine">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {getMaterialAll} from '@/api/purchase.js'
  import {getWarehouseList} from '@/api/materialScience/warehousingApplication.js'
  import {drawApplyDetail, submitDrawApply, modifyDrawApply} from '@/api/materialScience/materialRequisition.js'
  import {listAllDict} from '@/api/materialScience/materailDict.js'

  let $this = null
  export default {
    name: 'submitForm',
    props: {
      subData: {
        type: Object,
        default: {}
      }
    },
    data() {
      return {
        loading: false,
        isAdd: false,
        formData: {
          materailDTOS: [],
          statusName: "新建",
        },
        queryInfo: {
          pageNo: 1,
          pageSize: 25,
          materialName: ""
        },
        rules: {},
        warehouseList: [],
        materiaOptions: [],
        materailInfoValue: null,
        professCates: [],
        receiveUnits: [],
        projectNames: [],
        unitEngineNames: [],

        visible: false
      }
    },
    created() {
      $this = this
      this.init()
      if ($this.subData.btnId == 1) {
        return $this.drawApplyDetail()
      }
    },
    methods: {
      queryMaterail(queryWord) {
        this.materiaOptions = []
        this.queryInfo.materialName = queryWord
        getMaterialAll(this.queryInfo).then(res => {
          this.materiaOptions = res.data.data.records && res.data.data.records
        })
      },
      changeProjectNameF(){
        const valueOne=this.formData.projectName;
        const querys={
          type:3,
          valueOne:valueOne
        }
        $this.unitEngineNames=[]

        listAllDict(querys).then(res=>{
          // $this.unitEngineNames=[]
          $this.unitEngineNames=res.data.data

        })

      },
      deleLine(index) {
        this.formData.materailDTOS.splice(index, 1)
      },
      submitLine() {
        // if (!this.materailInfoValue) {
        //   this.$message.warning("请选择物料编号")
        //   return
        // }
        this.visible = false
        this.formData.materailDTOS.push({
          materailBasicInfoId: this.materailInfoValue,
          actualQut: null,
          planQut: null,

        })
        this.materailInfoValue = null
      },
      init() {
        getWarehouseList().then(res => {
          this.warehouseList = res.data.data
        })
        // getMaterialAll().then(res => {
        //   this.materiaOptions = res.data.data && res.data.data
        // })
        listAllDict().then(res => {

          const list=res.data.data;
          list.forEach(d=>{

            if(d.type.code==1){
              $this.professCates.push(d)
            }
            if(d.type.code==2){
              $this.receiveUnits.push(d)
            }
            if(d.type.code==3){
              let flag=true;
              $this.projectNames.forEach(p=>{

                if (p.valueOne==d.valueOne){
                    flag=false;
                }

              })
              if (flag){
                $this.projectNames.push(d)
              }

            }

          })

        })

      },
      // 详情
      drawApplyDetail() {
        $this.loading = true
        drawApplyDetail($this.subData.id).then(res => {
          $this.loading = false
          if (res.data.code != 200) {
            return $this.$message.error(res.data.message)
          }
          $this.formData = res.data.data
          this.formData.statusName = res.data.data.status.name
        }).catch(err => {
          $this.loading = false
        })
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (!valid) {
            return $this.$message.error('请完善表单信息')
          }
          if ($this.subData.btnId == 0) {
            $this.isAdd = true
            submitDrawApply($this.formData).then(res => {
              $this.isAdd = false
              if (res.data.code != 200) {
                return $this.$message.error(res.data.message)
              }
              $this.$emit('refresh')
            }).catch(err => {
              $this.isAdd = false
            })
          }
          if ($this.subData.btnId == 1) {
            $this.isAdd = true
            modifyDrawApply($this.formData).then(res => {
              $this.isAdd = false
              if (res.data.code != 200) {
                return $this.$message.error(res.data.message)
              }
              $this.$emit('refresh')
            }).catch(err => {
              $this.isAdd = false
            })
          }
        })
      },
      resetForm() {
        $this.$emit('closeView')
      }
    }
  }
</script>

<style scoped lang="scss">
  .el-input {
    width: 500px;
  }
</style>
